MagicalCoder.install({
  /*左侧可拖拽的源*/
  dragItems:[
    {
      name:"我的组件",
      icon:"layui-icon layui-icon-face-smile",
      children:[
        {
          name:"批量上传",
          icon:"ri-checkbox-indeterminate-line",
          html:"<mc-batch-upload></mc-batch-upload>",
        },
      ]
    }
  ],
  /*自定义组件和属性*/
  components:[
    {
      "identifier":"mc-batch-upload",
      "properties":{
        "primary":0,
        "name":"批量上传",
        "treeExtraName":{"attr":[],"text":true},
        "dragInto":false,
        "duplicate":true,
        "duplicateAttr":[],
        "copy":true,
        "paste":false,
        "canDelete":true,
      },
      "attributes":[
        {
          "title":"属性",
          "active":true,
          "content":[
            {
              type: "html",
              category: "配置",
              callback: {
                htmlCallback: function (param) {
                  return `
                 <div class="layui-row layui-col-space3" id="uploadApp">
    <template>
      <div class="layui-col-xs12">
        <el-row>
          <el-col :span="24">
            <template >
              <el-form v-model="dataManager" label-position="center" size="mini" label-width="60px">
                <el-form-item label="上传api">
                  <el-input filterable allow-create v-model="dataManager.uploadApi" placeholder="上传api" ></el-input>
                </el-form-item>
                <el-form-item label="处理api">
                  <el-input filterable allow-create v-model="dataManager.processingDataApi" placeholder="处理api" ></el-input>
                </el-form-item>
                <el-form-item label="外键api">
                  <el-input filterable allow-create v-model="dataManager.foreignApi" placeholder="外键api" ></el-input>
                </el-form-item>
                <el-form-item label="文本">
                  <el-input clearable v-model="dataManager.buttonText" placeholder="文本" ></el-input>
                </el-form-item>
                <el-form-item label="图标">
                  <el-input clearable v-model="dataManager.iconName" placeholder="icon" ></el-input>
                </el-form-item>
                <el-form-item label="样式">
                  <el-select  v-model="dataManager.typeName"  clearable placeholder="请选择样式">
                    <el-option
                      v-for="temp in typeOptions"
                      :key="temp.value"
                      :label="temp.label"
                      :value="temp">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="尺寸">
                  <el-select  v-model="dataManager.sizeName" clearable placeholder="请选择尺寸">
                    <el-option
                      v-for="temp in sizeOptions"
                      :key="temp.value"
                      :label="temp.label"
                      :value="temp">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="类型">
                  <el-checkbox v-model="dataManager.plainName" label="朴素" border></el-checkbox>
                  <el-checkbox v-model="dataManager.roundName" label="圆角" border></el-checkbox>
                  <el-checkbox v-model="dataManager.circleName" label="圆形" border></el-checkbox>
                  <el-checkbox v-model="dataManager.disableName" label="禁用" border></el-checkbox>
                  <el-checkbox v-model="dataManager.loadingName" label="加载中" border></el-checkbox>
                </el-form-item>

                <el-row style="margin:10px 0 20px;">
                  <el-button  size="mini" type="primary" @click="openConfig" >配置</el-button>
                  <el-button  size="mini" type="primary" @click="saveStatus" >保存</el-button>
                  <el-button  size="mini" type="danger" @click="clearConfig" >清除配置</el-button>
                </el-row>

              </el-form>
              <el-dialog fullscreen  :visible.sync="dialogVisible">

                <el-tabs type="border-card">
                  <el-tab-pane label="字段管理">
                    <el-row>
                      <el-form :inline="true">
                        <el-form-item label="位置">
                          <el-input-number clearable :min="0" size="small" :max="jsonOutput.length" v-model="fieldBody.index" placeholder="位置"></el-input-number>
                        </el-form-item>
                        <el-form-item label="excel字段">
                          <el-input size="small" clearable v-model="fieldBody.comment" placeholder="excel字段"></el-input>
                        </el-form-item>
                        <el-form-item label="字段">
                          <el-input size="small" clearable v-model="fieldBody.field" placeholder="名称"></el-input>
                        </el-form-item>

                        <el-form-item label="默认值">
                          <el-input size="small" clearable v-model="fieldBody.defVal" placeholder="默认值"></el-input>
                        </el-form-item>
                        <el-form-item label="操作">
                          <el-button size="mini" type="primary"  @click="addField">添加</el-button>
                          <el-button size="mini" type="primary"  @click="saveStatus">保存</el-button>
                        </el-form-item>
                      </el-form>

                    </el-row>
                    <el-divider></el-divider>
                    <el-scrollbar style="width: 100%;">
                      <el-col :span="6">
                        <el-input type="textarea"   :autosize="{ minRows: 2, maxRows: 30}"  v-model="dataManager.config.jsonInput" @blur="formatJson"></el-input>
                      </el-col>
                      <el-col :span="18">
                        <el-table
                        stripe
                          v-if="tableRefesh"
                          :height="635"
                          :data="jsonOutput"
                        >
                          <el-table-column label="操作" fixed="left" width="100" align="center">
                            <template #default="scope">
                              <el-button size="mini" type="danger"  @click="delField(scope.$index)">删除</el-button>
                            </template>
                          </el-table-column>
                          <el-table-column type="index" label="位置" width="150" align="center">
                            <template #default="scope">
                              <el-input-number :min="0" :max="jsonOutput.length-1" size="mini" v-model="scope.$index" @change="changePos"></el-input-number>
                            </template>
                          </el-table-column>
                          <el-table-column prop="comment" label="excel字段" align="center">
                            <template #default="scope">
                              <el-input @change="returnJson" v-model="scope.row.comment"></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column prop="field" label="字段" align="center">
                            <template #default="scope">
                              <el-input @change="returnJson" v-model="scope.row.field"></el-input>
                            </template>
                          </el-table-column>

                          <el-table-column prop="defVal" label="默认值" align="center">
                            <template #default="scope">
                              <el-input @change="returnJson" v-model="scope.row.defVal"></el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                    </el-scrollbar>
                  </el-tab-pane>
                  <el-tab-pane label="数据导入">
                    <el-form :inline="true">
                      <el-form-item label="位置">
                        <el-input-number clearable :min="0" size="small" :max="dataManager.config.taskList.length" v-model="tableBody.index" placeholder="位置"></el-input-number>
                      </el-form-item>
                      <el-form-item label="插入表">
                        <el-input size="small" clearable v-model="tableBody.table" placeholder="数据表"></el-input>
                      </el-form-item>

                      <el-form-item label="操作">
                        <el-button size="mini" type="primary"  @click="addTableField">添加</el-button>
                        <el-button size="mini" type="primary"  @click="saveStatus">保存</el-button>
                      </el-form-item>
                    </el-form>
                    <el-table
                    stripe
                      v-if="tableRefesh"
                      :data="dataManager.config.taskList"
                      :height="700">
                      <el-table-column type="index" label="位置" width="150" align="center">
                        <template #default="scope">
                          <el-input-number :min="0" :max="dataManager.config.taskList.length-1" size="mini" v-model="scope.$index" @change="changeTablePos"></el-input-number>
                        </template>
                      </el-table-column>
                      <el-table-column type="expand">
                        <template #default="scope">
                          <el-row>
                            <el-checkbox-group v-model="scope.row.data" size="mini">
                              <el-checkbox v-for="item in jsonOutput" :label="item"  border>{{item.field}}</el-checkbox>
                            </el-checkbox-group>
                          </el-row>
                          <el-table
                          stripe
                            :height="500"
                          :data="scope.row.data"
                          >
                           <el-table-column label="操作">
                              <template #default="hcope">
                                <el-button size="mini" type="danger"  @click="delTableData(scope.$index,hcope.$index)">删除</el-button>
                              </template>
                            </el-table-column>
                            <el-table-column prop="comment" label="excel字段"></el-table-column>
                            <el-table-column prop="field" label="字段名"></el-table-column>
                            <el-table-column prop="newField" label="新字段名">
                              <template #default="scope">
                                <el-input v-model="scope.row.newField"></el-input>
                              </template>
                            </el-table-column>
                            <el-table-column prop="dyField" label="对应字段">
                              <template #default="scope">
                                <el-input v-model="scope.row.dyField" filterable placeholder="请选择">
                                </el-input>
                              </template>
                            </el-table-column>
                            <el-table-column prop="xsField" label="显示字段">
                              <template #default="scope">
                                <el-input v-model="scope.row.xsField" filterable placeholder="请选择">
                                </el-input>
                              </template>
                            </el-table-column>
                            <el-table-column prop="jsEare" label="js操作（$item）">
                              <template #default="scope">
                                <el-input v-model="scope.row.jsEare" filterable placeholder="请选择">
                                </el-input>
                              </template>
                            </el-table-column>
                          </el-table>
                        </template>
                      </el-table-column>
                      <el-table-column prop="table" label="插入表" width="200">
                        <template #default="scope">
                          <el-input v-model="scope.row.table"></el-input>
                        </template>
                      </el-table-column>
                      <el-table-column prop="data" label="被选字段">
                        <template #default="scope">
                          <el-tag v-for="item in scope.row.data">{{item.field}}</el-tag>
                        </template>
                      </el-table-column>
                      <el-table-column label="编辑">
                        <template #default="scope">
                          <el-button size="mini" type="danger"  @click="delTableTask(scope.$index)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </el-dialog>
            </template>
          </el-col>
        </el-row>
      </div>
    </template>
  </div>
`
                },
                 render: function (param) {
                  setTimeout(function () {
                    let focusNode = param.focusNode;
                    new Vue({
                      el: '#uploadApp',
                      data: {
                        tableRefesh:true, //刷新
                        dialogVisible:false, //配置弹窗
                        tableFieldOptions:[],//表字段选项
                        sizeOptions:[
                          {label:"medium",value:"medium"},
                          {label:"small",value:"small"},
                          {label:"mini",value:"mini"},
                          {label:"default",value:""},
                        ],
                        typeOptions:[
                          {label:"text",value:"text"},
                          {label:"primary",value:"primary"},
                          {label:"success",value:"success"},
                          {label:"info",value:"infoc"},
                          {label:"warning",value:"warning"},
                          {label:"danger",value:"danger"},
                        ],
                        eventOptions:[
                          {label:"外键",value:"FOREIGNKEY"},
                          {label:"父子组",value:"ParentChildGroup"},
                          {label:"默认",value:"DEFAULT"},
                        ],
                        "fieldBody": {
                          "index": 0,
                          "field": "",
                          "comment": "",
                          "defVal": ""
                        },
                        tableBody: {
                          index:0,
                          table:"",
                          data:[],
                        },
                        dataManager:
                          {
                            uploadApi:"/youyaboot-admin/magical_lowcode/openapi/f432448d26054eba8426d4eaf1946e3d/analyze-excel",         //上传api
                            processingDataApi:"/youyaboot-admin/magical_lowcode/openapi/f432448d26054eba8426d4eaf1946e3d/process-data",     //处理api
                            foreignApi:"", //外键api
                            buttonText:"批量上传",
                            typeName:"warning",
                            iconName:"el-icon-upload",
                            sizeName:"small",
                            plainName:true,
                            roundName:false,
                            circleName:false,
                            disableName:false,
                            loadingName:false,

                            config:{
                              taskList:[
                                {
                                  table:"",
                                  data:[],
                                },
                              ],
                              jsonInput:'[\n' +
                                '  {\n' +
                                '    "field": "ct",\n' +
                                '    "comment": "",\n' +
                                '    "defVal": "10"\n' +
                                '  }\n' +
                                ']',

                            }

                          }

                      },
                      computed: {
                        jsonOutput: function () {
                          try {
                            return JSON.parse(this.dataManager.config.jsonInput);
                          } catch (error) {
                            return []
                          }
                        }
                      },
                      mounted: function () {
                        this.importDataManager()
                      },
                      methods: {
                        //配置任务所需要的字段
                        confTask(){
                        },
                        //根据dataManager.fieldBody的index添加字段
                        addField(){
                          let data = {
                            "field": this.fieldBody.field,
                            "comment": this.fieldBody.comment,
                            "defVal": this.fieldBody.defVal
                          }
                          this.jsonOutput.splice(this.fieldBody.index,0,data)
                          this.returnJson()
                        },
                        addTableField(){
                          this.dataManager.config.taskList.push({
                            table:this.tableBody.table,
                            data:[],
                          })
                        },
                        //删除字段
                        delField(i){
                          this.jsonOutput.splice(i,1)
                          this.returnJson()
                        },
                        delTableTask(i){
                          this.dataManager.config.taskList.splice(i,1)
                        },
                        delTableData(i,j){
                          this.dataManager.config.taskList[i].data.splice(j,1)
                        },
                        //刷新表格
                        refreshTable(){
                          this.tableRefesh = false
                          this.$nextTick(()=>{
                            this.tableRefesh = true
                          })
                        },
                        //变换位置
                        changePos(newVal,oldVal){
                          this.jsonOutput.splice(newVal,0,this.jsonOutput.splice(oldVal,1)[0])
                          this.returnJson()
                          this.refreshTable()
                        },
                        changeTablePos(newVal,oldVal){
                          this.dataManager.config.taskList.splice(newVal,0, this.dataManager.config.taskList.splice(oldVal,1)[0])
                          this.refreshTable()
                        },
                        //右侧json变成左侧
                        returnJson(){
                          this.dataManager.config.jsonInput = JSON.stringify(this.jsonOutput, null, 2)
                        },
                        //左侧json变成右侧
                        formatJson() {
                          try {
                            const parsedJson = JSON.parse(this.dataManager.config.jsonInput);
                            this.dataManager.config.jsonInput = JSON.stringify(parsedJson, null, 2);
                          } catch (error) {
                            alert('Invalid JSON: ' + error.message);
                          }
                        },
                        //打开dialog
                        openConfig(){
                          this.dialogVisible = true
                        },
                        importDataManager() {
                          if (MAGICAL_CODER_API.getFocusNode().attributes.datamanager) {
                            let renderInfo = JSON.parse(MAGICAL_CODER_API.getFocusNode().attributes.datamanager.replaceAll('&quot;', '"'))
                            console.log("重新载入的参数",renderInfo);
                            this.dataManager=renderInfo
                          }
                        },
                        /**保存当前状态**/
                        clearConfig(){
                          MAGICAL_CODER_API.changeAttr({
                            node: focusNode,
                            name: "datamanager",
                            value: ""
                          }, false)
                          this.$message.success("清除成功")
                        },
                        /**保存当前状态**/
                        saveStatus() {
                          MAGICAL_CODER_API.changeAttr({
                            node: focusNode,
                            name: "datamanager",
                            value: JSON.stringify(this.dataManager)
                          }, false)
                          this.$message.success("保存成功")
                        },
                      },

                    })
                  }, 5)
                }
              }
            },
          ]
        }
      ]
    }
  ]
});
